import React, { Component } from 'react';
import { StyleSheet, View, Dimensions, Text, Image, TextInput, TouchableOpacity } from "react-native";
import { style } from '../../../../theme/style';
import { ParentBox } from './ParentBox';

const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class TextareaCpt extends ParentBox {
	constructor(props) {
		super(props);
		this.state = {
			propsData: props || {}
		}
	}

	componentWillReceiveProps (props) {
		if (props) {
			this.setState({
				propsData: props || {}
			})
		}
	}

	_content = () => {
		let { propsData } = this.state || {};
		let { data, callBack, onFocus } = propsData;
		let { title, multiline, inputStyle, id, value, otherData } = data || {};
		/* if (value && id === "defaultTitle") {
			let keyArr = [];
			let valArr = [];
			for (var key in otherData) {
				keyArr.push(key);
				valArr.push(otherData[key]);
			}
			let result = "return " + "`" + value + "`";
			let lsFn = new Function(keyArr, result);
			value = lsFn(...valArr);
		} */
		const NAME = otherData;
		if (value && id === "defaultTitle") {
			value = value.split('${');
			value = value.map(item => {
				if (item.indexOf("}") != -1) {
					let lsArr = item.split("}");
					if (lsArr.length > 1) {
						item = NAME[lsArr[0]] + lsArr[1];
					} else {
						item = NAME[lsArr[0]];
					}
				}
				return item;
			})
			value = value.join('');
			callBack && callBack({ [id]: value });
		}

		return (
			<View style={styles.TextArea}>
				<Text style={styles.title}>{title}</Text>
				<TextInput
					defaultValue={value || ''}
					placeholderTextColor={"#999"}
					underlineColorAndroid='transparent'
					style={[styles.input, inputStyle]}
					numberOfLines={6}
					multiline={multiline || false}
					onChangeText={(inputValue) => {
						callBack && callBack({ [id]: inputValue });
					}}
					onFocus={() => {
						if (!onFocus) return;
						onFocus && onFocus();
					}}
				/>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	title: {
		fontSize: 12 * scale,
		marginVertical: 10 * scale
	},
	input: {
		borderRadius: 8 * scale,
		borderColor: '#D8D8D8',
		borderWidth: 1,
		height: 46 * scale,
		paddingHorizontal: 5 * scale,
		marginBottom: 10 * scale
	}
})